<template>
  <div>
    <div style="padding: 12px 0">
      <div class="card">
        <BasicForm @register="registerFilter" @submit="onSearch"> </BasicForm>

        <BasicTable :resizeHeightOffset="44" @expand="onExpand" @register="state[0].registerTable">
          <template #expandedRowRender="{ record }">
            <table v-if="!!record.detail" class="sub-table">
              <thead>
                <tr class="cn-medium th">
                  <td>商品信息</td>
                  <td>属性</td>
                  <td>单价</td>
                  <td>数量</td>
                  <td style="text-align: center">订单总额</td>
                  <td style="text-align: center">操作</td>
                </tr>
              </thead>
              <tbody>
                <tr
                  v-for="(item, index) in record.detail?.responseMasterOrderItemBeanList"
                  :key="index"
                >
                  <td style="border: 0; width: 290px">
                    <pro-img-cell :src="item.goodsThumb" :title="item.goodsName"></pro-img-cell>
                  </td>
                  <td style="border: 0">
                    <span v-if="item.itemGoodsType === 4 && item.extensionCode === 'cash'">卡续充</span>
                    <span v-else-if="item.itemGoodsType === 5 && item.extensionCode === 'cash'">卡升级</span>
                    <span v-else-if="item.extensionCode === 'banlance' || item.extensionCode === 'times'">耗卡</span>
                    <span v-else-if="item.extensionCode === 'gift'" style="
                          border-radius: 3px;
                          border: 1px solid #f2a8ba;
                          font-size: 12px;
                          color: #f1a3b8;
                          padding: 2px 4px;
                        ">赠品</span>
                    <span v-else>购买</span>
                  </td>
                  <td style="border: 0">
                    <span>¥</span>
                    <span>{{ item.shoppingPrice }}</span>
                  </td>
                  <td style="border: 0"> x{{ item.goodsQty }} </td>
                  <td
                    v-if="index === 0"
                    :rowspan="record.detail.responseMasterOrderItemBeanList.length"
                    style="text-align: center"
                  >
                    <div>
                      <span>实付 ¥</span>
                      <span>{{ Math.abs(record.detail.payTotalFee) || 0 }}</span>
                    </div>
                    <div v-if="record.detail.debtFee > 0">
                      欠款&nbsp;{{ record.detail.debtFee }}
                    </div>
                  </td>

                  <td
                    v-if="index === 0"
                    :rowspan="record.detail.responseMasterOrderItemBeanList.length"
                    style="text-align: center"
                  >
                    <a @click="onDetail(record)">{{ orderText(record) }}</a>
                  </td>
                </tr>
              </tbody>
            </table>
          </template>
        </BasicTable>
      </div>
    </div>
    <back-detail @register="registerDetail1" />
    <OrderDetail @register="registerDetail" />
  </div>
</template>

<script setup>
  import { defineOptions, nextTick, onMounted, reactive, watch } from 'vue';
import dayjs from 'dayjs'
  import { useRouter, useRoute } from 'vue-router';

  import { BasicTable, useTable } from '@/components/Table';
  import { PAGE, POST } from '@/api/http';

  import { BasicForm, useForm } from '@/components/Form/index';
  import { useDrawer } from '@/components/Drawer';
  import BackDetail from "./back-detail.vue";
  import OrderDetail from '../cashier/order-detail.vue';
  import ProImgCell from '@/widget/pro-img-cell.vue';

  const [registerDetail, { openDrawer: detailDrawer }] = useDrawer();
  const [registerDetail1, { openDrawer: TDlDrawer }] = useDrawer();

  const props = defineProps({
    memberCode: {
      type: String,
    },
  });

  defineOptions({ name: 'MemberTransactionLog' });

  const router = useRouter(), route = useRoute();

  const [registerFilter, filter] = useForm({
    baseColProps: { style: { paddingRight: '12px' } },
    actionColOptions: { span: 5 },
    submitOnReset: true,
    schemas: [
      {
        field: 'goodsName',
        component: 'Input',
        componentProps: {
          placeholder: '输入商品名称进行搜索',
        },
        colProps: { span: 6 },
      },
      {
        field: 'startTime',
        component: 'DatePicker',
        componentProps: {
          showTime: false,
          placeholder: '下单开始日期',
          valueFormat: 'YYYY-MM-DD',
          format: 'YYYY-MM-DD',
          disabledDate: (value) => filter.getFieldsValue().endTime < dayjs(value).format("YYYY-MM-DD")
        },
        colProps: { span: 6 },
      },

      {
        field: 'endTime',
        component: 'DatePicker',
        componentProps: {
          showTime: false,
          placeholder: '下单结束日期',
          valueFormat: 'YYYY-MM-DD',
          format: 'YYYY-MM-DD',
          disabledDate: (value) => filter.getFieldsValue().startTime > dayjs(value).format("YYYY-MM-DD")
        },
        colProps: { span: 6 },
      },
    ],
  });

  const [registerTable0, table0] = useTable({
    api: PAGE('/cashier/getMasterOrderBeanList'),
    immediate: false,
    expandRowByClick: true,
    beforeFetch: (arg) => getSearchArg(arg),
    columns: [
      {
        title: '订单编号',
        dataIndex: 'masterOrderSn',
        ellipsis: false,
      },
      {
        title: '下单时间',
        dataIndex: 'addTime',
        ellipsis: false,
      },
      {
        title: '操作人',
        dataIndex: 'cashierName',
        ellipsis: false,
      },
    ],
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'masterOrderSn',
  });

  const state = reactive({
    search: {
      type: 0,
    },
    0: {
      registerTable: registerTable0,
      table: table0,
    },
  });

  function getSearchArg(arg) {
    const { memberCode } = props;
    const data = filter.getFieldsValue();
    return Object.assign(arg, data, { memberCode });
  }

  onMounted(() => {
    onSearch();
  });

  watch(
    () => state.search.type,
    () => nextTick(onSearch),
  );

  async function onSearch() {
    const { type } = state.search,
      target = state[type];

    target.table.reload();
    target.table.redoHeight();
  }

  // function onDetail({ masterOrderSn, memberCode }) {
  //   detailDrawer(true, { masterOrderSn, memberCode });
  // }

  function orderText(item) {
    if(item.orderType === 2) {
      return '退单详情'
    } else {
      return '订单详情'
    }
  }


  function onDetail(record) {
    console.log(record)
    if (record.orderType === 2){
      TDlDrawer(true, {record})
    } else {
      detailDrawer(true, { masterOrderSn:record.masterOrderSn, memberCode:record.memberCode});
    }
  }



  async function onExpand(expanded, record) {
    if (!expanded) {
      return;
    }

    try {
      table0.setLoading(true);

      const { masterOrderSn, memberCode } = record;
      record.detail = await POST('/cashier/getMasterOrderDetailsBean', {
        masterOrderSn,
        memberCode,
      });
    } finally {
      table0.setLoading(false);
    }
  }
</script>
<style lang="less" scoped>
  .card {
    padding: 16px;
  }

  .sub-table {
    background-color: #fff;

    border: 1px solid #f0f0f0;
    border-collapse: collapse;
    width: 100%;

    tr,
    td {
      border: 1px solid #f0f0f0;
      border-collapse: collapse;
      color: #333;
    }

    td {
      padding: 4px 6px;
    }

    .th {
      height: 36px;
      background-color: #f0f0f0;
    }
  }
</style>
